<template>
  <div class="calendar-box">
    <div class="header">
      <div class="header-title">日程安排</div>
      <div class="header-more" @click="toCalenderArrange">更多</div>
    </div>
    <div class="time">
      <span>
        <span>{{ date.getFullYear() }}年</span>
        <span>{{ date.getMonth() }}月</span>
      </span>
    </div>
    <ui-calendar class="calendar">
      <template slot="dateCell" slot-scope="{ data }">
        <ui-tooltip class="item" effect="dark" :content="getRemark(data.day)" placement="top-start" v-if="getHasRemark(data.day)">
          <div :class="data.isSelected ? 'is-selected' : ''">
            <div class="calendar-circle" @click="test(data)" :class="getHasRemark(data.day) ? 'hasRemark' : ''">
              {{ data.day.substring(8, 9) == 0 ? data.day.substring(9, 10) : data.day.substring(8, 10) }}
            </div>
          </div>
        </ui-tooltip>
        <div :class="data.isSelected ? 'is-selected' : ''" v-else>
          <div class="calendar-circle" @click="test(data)" :class="getHasRemark(data.day) ? 'hasRemark' : ''">
            {{ data.day.substring(8, 9) == 0 ? data.day.substring(9, 10) : data.day.substring(8, 10) }}
          </div>
        </div>
      </template>
    </ui-calendar>
  </div>
</template>

<script>
export default {
  name: 'vx-home-calendar',
  data() {
    return {
      dateRemark: [
        { date: '2023-09-02', remark: '备注1' },
        { date: '2023-09-05', remark: '备注2' },
        { date: '2023-09-11', remark: '备注3' },
        { date: '2023-09-20', remark: '备注4' },
      ],
      date: new Date(),
    };
  },
  methods: {
    test(data) {
      console.log(data);
    },
    getHasRemark(date) {
      let flag = false;
      this.dateRemark.forEach((item) => {
        if (item.date === date) {
          flag = true;
        }
      });
      return flag;
    },
    getRemark(date) {
      let remark = '暂无备注';
      this.dateRemark.forEach((item) => {
        if (item.date === date) {
          remark = item.remark;
        }
      });
      return remark;
    },
    toCalenderArrange() {
      this.$router.push('/system/calender');
    },
  },
};
</script>

<style lang="scss" scoped>
.calendar-box {
  height: 350px;
  padding: 20px;
  border-radius: 8px;
  background: #fff;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header-title {
      font-size: 20px;
      font-weight: bold;
      color: #000;
    }
    .header-more {
      cursor: pointer;
      font-size: 16px;
    }
  }
  .time {
    span {
      font-size: 18px;
    }
    color: #000;
    font-weight: bold;
    text-align: center;
    padding-bottom: 10px;
    margin-top: -20px;
  }
  .calendar {
    .calendar-circle {
      // border: 1px solid #333;
      // border-radius: 50%;
      width: 28px;
      height: 28px;
      line-height: 28px;
      text-align: center;
    }
    .hasRemark {
      // border: 1px solid red;
      // color: red;
      color: #fff;
      background: blue;
      border-radius: 2px;
    }
  }
}
// ::v-deep .ui-calendar-day div {
//   width: 100%;
//   height: 100%;
// }
// ::v-deep .ui-calendar-table tbody:last-child {
//   display: none !important;
// }
//不显示前后月日期
// ::v-deep .ui-calendar-table:not(.is-range) td.next {
//   display: none !important;
// }
// ::v-deep .ui-calendar-table:not(.is-range) td.prev {
//   visibility: hidden !important;
// }
::v-deep .ui-calendar-table td {
  border: none !important;
}
::v-deep .ui-calendar__header {
  display: none;
}
::v-deep .ui-calendar-table .ui-calendar-day {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
::v-deep .ui-calendar-table .ui-calendar-day:hover {
  background: #fff !important;
}
::v-deep .ui-calendar-table thead th {
  text-align: center;
  font-size: 16px;
}
::v-deep .ui-calendar__body {
  padding: 0;
}
::v-deep .ui-calendar-table td.is-today {
  .calendar-circle {
    color: #000 !important;
    // background: red;
    border: none;
    border: 1px solid blue;
    border-radius: 2px;
    background: none;
  }
}
::v-deep .ui-calendar-table td.is-selected {
  background: none !important;
}
</style>
